<template>
	<view class="publishState">
		<u-navbar title="发布动态" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>



		<form @submit="formSubmit" @reset="formReset">
			<view class="card">
				<view class="header">
					<button class="draftpaper-btn" form-type="submit">草稿纸</button>
					<button class="publish-btn" form-type="submit">发布</button>
				</view>
				<view class="uni-form-item uni-column" style="border-bottom: 1px solid #F1F1F1;padding-bottom: 18rpx;">
					<input class="uni-input" name="title" focus placeholder="添加标题" />
				</view>
				<view class="uni-form-item uni-column">
					<textarea name="info" placeholder="说点什么,分享给更多人" />
				</view>
				<view class="upload-list">
					<view class="addUpload-card" v-if="!images.length">
						<view class="center" @click="handleUpload">
							<image class="add-icon" src="/static/images/add-icon.png"></image>
							<text>动态图</text>
						</view>
					</view>
					<view class="upload-card" v-else>
						<div class="close">
							<image class="close-icon" src="/static/images/X.png" alt="" />
						</div>
						<image class="img" v-for="item in images" :src="item" alt="" srcset="" />
					</view>
				</view>
			</view>
			<view class="card">
				<view class="title">
					<view class="label">
						#添加话题
						<view class="msg">(推荐)</view>
					</view>
					<image class="rg-icon" @click="handleAddHt" src="/static/images/arrow-right-bold.png"></image>
				</view>
				<view class="tag-list">
					<view class="tag-item" v-for="item in tags">{{item}}</view>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				upLoadAction: this.$globalConstVars.apiBaseUrl + '/Api/Common/UploadImages', // 文件上传的api的url
				tags: ['#居家好物', '#餐桌上的油烟机', '#小空间搭档挂壁'], // 话题列表
				images: [] // 文件上传成功存储的url
			}
		},
		methods: {
			handleUpload() {
				const that = this
				uni.chooseImage({
					success: function(res) {
						var tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: that.upLoadAction, //非真实的接口地址
							fileType: 'image',
							filePath: tempFilePaths[0],
							header: {
								'Accept': 'application/json',
								'Content-Type': 'multipart/form-data',
								'Authorization': 'Bearer ' + that.$db.get('userToken')
							},
							name: 'file',
							success: function({
								data
							}) {
								const newData = JSON.parse(data)
								const fileUrl = newData.data.fileUrl
								that.images.push(fileUrl)
								console.log(that.images);
							},
							fail: function(error) {
								uni.showToast({
									title: '文件上传失败',
									duration: 1000
								})
							}
						});
					}
				});
			},
			formSubmit(e) {
				console.log(e);
			},
			handleAddHt() { // 添加话题

			}
		}
	}
</script>

<style lang="scss" scoped>
	.publishState {
		.card {
			margin-top: 20rpx;
		}

		.header {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 0 26rpx;

			.draftpaper-btn,
			.publish-btn {
				margin: 0;
				border-radius: 28rpx;
				border: none;
				width: 160rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				margin-left: 14rpx;

				&::after {
					display: none;
				}
			}

			.draftpaper-btn {
				background-color: #fff;
				color: #B1B1B1;
				border: 1px solid #B1B1B1;
			}

			.publish-btn {
				background-color: #D0241C;
				color: #fff;
			}
		}

		.uni-input {
			font-size: 32rpx;
		}

		.uni-column {
			padding-top: 24rpx;
		}

		.upload-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding-bottom: 28rpx;

			.addUpload-card {
				width: 25%;
				height: 180rpx;
				border: 3rpx dashed #E0E0E0;
				display: flex;
				justify-content: center;
				align-items: center;

				.center {
					display: flex;
					flex-direction: column;
					align-items: center;

					.add-icon {
						width: 80rpx;
						height: 80rpx;
					}

					text {
						margin-top: 12rpx;
						color: #DEDEDE;
						font-size: 30rpx;
					}
				}
			}

			.upload-card {
				position: relative;
				width: 25%;
				margin: 0 14rpx;
				height: 180rpx;
				box-sizing: border-box;
				border: 3rpx dashed #E0E0E0;

				&:hover {
					border-color: #c2c2c7;
				}

				.img {
					width: 100%;
					height: 100%;
				}

				.close {
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 30rpx;
					height: 30rpx;
					background-color: rgba(255, 255, 255, .8);
					border-radius: 50%;

					.close-icon {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}

		textarea {
			height: 180rpx;
		}

		.card {
			background-color: #fff;
			border-radius: 30rpx;
			padding: 20rpx 34rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 18rpx;
				border-bottom: 2rpx solid #E6E6E6;

				.label {
					display: flex;
					align-items: center;
					color: #333;
					font-size: 30rpx;

					.msg {
						font-size: 26rpx;
						color: #B1B1B1;
					}
				}


				.rg-icon {
					width: 35rpx;
					height: 35rpx;
				}
			}

			.tag-list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				margin-top: 20rpx;

				.tag-item {
					padding: 8rpx 14rpx;
					border-radius: 12rpx;
					box-shadow: 0px 4px 22px #c2c2c7;
					margin-right: 16rpx;
					font-size: 26rpx;
				}
			}
		}
	}
</style>